<template>
	<view class="page">
		<view v-if="isHead=='我的收藏'" :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper swiper_main" :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration" circular>
							<swiper-item v-for="(item,index) in banner" :key="index">
								<view class="swiper-item uni-bg-red">
									<image :src="webImgUrl+item" mode="" />
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="zp_main">
			<view class="tabFat">
				<view class="tabListTxt">
					<text class="tab_child" @click="change(index)" :class="item.id==currentIndex?'tab_active':''"
						v-for="(item,index) in menu" :key="index">{{item.title}}</text>
				</view>
				<view class="tabList_main">
					<view class="tabList_main_list" v-if="currentIndex==0">
						<view class="tab_search">
							<!-- 搜索框 -->
							<view class="search" v-model="searchForm">
								<view class="search_left" @click="searchLeft">
									<text>{{tit}}</text>
									<image :class="searchList==true?'active_img':'cancle_img'"
										src="../../static/icon/jiantou.png" mode="" />
								</view>
								<view class="search_center">
									<view>
										<image src="../../static/icon/search.png" mode=""></image>
										<input type="text" value="" placeholder="搜索职位/企业/内容"
											v-model="searchForm.search" />
									</view>
									<view class="btn" @click="search(searchForm)">搜索</view>
								</view>
								<view class="search_lsit" :class="searchList==true?'searchActive':'cancleSearch'">
									<view @click="search_lsit_click('招聘')">招聘</view>
									<view @click="search_lsit_click('求职')">求职</view>
								</view>
							</view>
						</view>
						<!-- 职位推荐 -->
						<view class="index_line"></view>
						<view class="zwtj dis_flex">
							<view>
								<image src="../../static/icon/zwtj.png" mode=""></image>
								<text>职位推荐</text>
							</view>
							<text class="more" @click="positionMore">更多</text>
						</view>
						<view class="talentRec">
							<positionRecd> </positionRecd>
						</view>
						<!-- 人才推荐 -->
						<view class="index_line"></view>
						<view style="margin-top: 10px;" class="rctj">
							<view class="Talent_recommendation_head">
								<view class="">
									<image src="../../static/icon/rctj.png" mode=""></image>
									<text>人才推荐</text>
								</view>
								<text class="more" @click="talentMore">更多</text>
							</view>
							<view class="talentRec">
								<talentRecommendation></talentRecommendation>
							</view>
						</view>

					</view>
					<view v-if="currentIndex==1" style="margin-top: 35rpx;">
						<find-Work ref="findwork" :findRtData="findRtData"></find-Work>
					</view>
					<view v-if="currentIndex==2" style="margin-top: 35rpx;">
						<findPerson ref="findperson" :findperson="findperson"></findPerson>
					</view>
					<view v-if="currentIndex==3" style="margin-top: 35rpx;">
						<guanzhu ref="myguanzhu"></guanzhu>
					</view>
				</view>

			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import head1 from '../../common/head/head'
	import search from '../../components/search.vue'
	import zdmb from '../../components/zdmb.vue'
	import positionRecd from '../../pages/zhaopin1/positionRecommendation.vue'
	import talentRecommendation from '../../pages/zhaopin1/TalentRecommendation.vue'
	import findWork from '../../components/zhaopin/findWork.vue'
	import guanzhu from '../../components/zhaopin/guanzhu.vue'
	import findPerson from '../../components/zhaopin/findPerson.vue'
	export default {
		components: {
			search,
			zdmb,
			positionRecd,
			talentRecommendation,
			findWork,
			findPerson,
			guanzhu,
			head1
		},
		data() {
			return {
				title: '我的收藏',
				zwtj: [],
				searchList: false,
				tit: '招聘',
				findRtData: {
					search: ''
				},
				findperson: {
					search: ''
				},
				searchForm: {
					currentPage: 1,
					pageSize: 10,
					type: "findrt",
					search: '',
					userId: ''
				},
				tuijian: {
					currentPage: 1,
					pageSize: 10,
					userId: ''
				},
				// 人才关注
				personGZ: {
					pageSize: 1,
					currertPage: 10,
					userId: '',
					type: 'findjb'
				},
				demo: {
					top: '',
					height: ''
				},
				isHead: false,
				personList: [],
				dataTuijian: [],
				webImgUrl: '',
				banner: [],
				actives: false,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				currentIndex: 0,
				guangzhuActive: true,
				menu: [{
					id: 0,
					title: "推荐"
				}, {
					id: 1,
					title: "找工作"
				}, {
					id: 2,
					title: "招人才"
				}, {
					id: 3,
					title: "关注"
				}],
			};
		},
		onLoad(option) {
			// 个人中心->我的收藏
			this.isHead = option.title
			if (this.isHead == '我的收藏') {
				this.currentIndex = 3
			}
		},
		computed: {
			userid() {
				return this.$store.state.userId
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			// 获取图片前缀
			this.webImgUrl = this.$webUrl
			this.tuijian.userId = this.userid
			this.tuijian.userId = this.userid
			this.searchForm.userId = this.userid
			this.initData()

		},
		methods: {
			initData() {
				this.$store.dispatch('getCerts')
				this.$store.dispatch('getSalary')
				this.$store.dispatch('getEdu')
				this.$store.dispatch('getBackground')
				this.getBanner()
				this.getTuijianJob(this.tuijian)
				setTimeout(() => {
					// this.$refs.myguanzhu.initData()
					this.$refs.findwork.initData()
					this.$refs.findperson.initData()
				}, 3000)

			},
			//人才推荐
			getTuijianJob(data) {
				this.$myResquest.recruitJob(data).then(res => {
					if (res.data.code == 200) {
						this.dataTuijian = res.data.data
					}
				})
			},
			// 轮播图
			getBanner() {
				this.$myResquest.banner().then(res => {
					this.banner = res.data.data
				})
			},

			// 人才、职位
			activeTit(index) {
				if (index == 0) {
					// 调用人才接口
					if (this.actives) {
						this.guangzhuActive = !this.guangzhuActive
						this.actives = !this.actives
					}
				}
				if (index == 1) {
					// 调用职位接口
					if (!this.actives) {
						this.guangzhuActive = !this.guangzhuActive
						this.actives = !this.actives
					}
				}
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			// tab
			change(index) {
				console.log('变化')
				console.log(index)
				this.currentIndex = index
			},
			positionMore() {
				this.currentIndex = 1
			},
			talentMore() {
				this.currentIndex = 2
			},
			// 搜索
			search(form) {
				// 招聘
				if (form.type == "findrt") {
					this.currentIndex = 1
					this.findRtData.search = form.search
					this.searchForm.search = ''
				}
				// 求职
				if (form.type == "findjb") {
					this.currentIndex = 2
					this.findperson.search = form.search
					this.searchForm.search = ''
				}
			},
			// 下拉框点击事件
			search_lsit_click(data) {
				this.tit = data
				if (data == "招聘") {
					this.searchForm.type = 'findrt'
				}
				if (data == "求职") {
					this.searchForm.type = 'findjb'
				}
				this.searchList = !this.searchList
			},
			searchLeft() {
				this.searchList = !this.searchList
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background: #f7f7f7 !important;
		    position: fixed;
		    height: 100%;
		    overflow: auto;
			    padding-bottom: 200rpx;
		.swiper_main {
			/deep/ .uni-swiper-dots {
				position: absolute;
				bottom: 4rpx !important;
		
			}
		
			/deep/ .uni-swiper-dot-active {
				background-color: #5cd1ce !important;
			}
		
			/deep/ .wx-swiper-dots {
				position: absolute;
				bottom: 4rpx !important;
		
			}
		
			/deep/ .wx-swiper-dot-active {
		
		
				background-color: #5cd1ce !important;
		
			}
		
		}
		
		.swiper {
			min-width: 750rpx;
			height: 284rpx;
		
		
		
			.swiper-item {
				width: 100%;
				height: 100%;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.hah {
			font-size: 20rpx;
		
		}
		
		.zp_main {
			// padding: 0 12px;
			background: #f7f7f7;
			width: 100%;
			// min-width: 375px;
			min-height: 208rpx;
			padding-bottom: 60rpx;
		
			.tabFat {
		
		
				background: #f7f7f7;
		
				.tabListTxt {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #999999;
					background: #f7f7f7;
					height: 82rpx;
					width: 603rpx;
					margin: 10rpx auto 0;
		
					.tab_child {
						width: 84rpx;
						min-width: 80rpx;
						margin-right: 40rpx;
						min-height: 46rpx;
						line-height: 46rpx;
		
					}
		
				}
		
				.tabList_main {
					.tabList_main_list {
						.tab_search {
							background: none;
		
							.search {
								position: relative;
								display: flex;
								align-items: center;
								border-radius: 32rpx;
								box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.1);
		
								.search_left {
									display: flex;
									width: 102rpx;
									min-width: 102rpx;
									height: 26rpx;
									justify-content: space-between;
									padding-left: 26rpx;
									box-sizing: content-box;
									align-items: center;
									border-right: 2rpx solid #d2d2d2;
		
									text {
										font-size: 24rpx;
										font-family: PingFang SC, PingFang SC-Medium;
										font-weight: 500;
										color: #333333;
									}
		
									image {
										width: 22rpx;
										height: 14rpx;
										margin-right: 6rpx;
		
									}
								}
		
								.search_center {
									display: flex;
									justify-content: space-between;
									width: 100%;
									// min-width: 288px;
		
									view {
										display: flex;
										align-items: center;
		
										image {
											width: 24rpx;
											height: 24rpx;
											margin-left: 28rpx;
											margin-right: 14rpx;
										}
		
										.uni-input-placeholder {
											font-size: 24rpx;
											font-family: PingFang SC, PingFang SC-Medium;
											font-weight: 500;
											text-align: left;
											color: #d2d2d2;
											background: #ffffff;
										}
									}
		
									.btn {
										display: flex;
										justify-content: center;
										align-items: center;
										min-width: 120rpx;
										height: 68rpx;
										background: #5cd1ce;
										border-radius: 34rpx;
										font-size: 24rpx;
										font-family: PingFang SC, PingFang SC-Medium;
										font-weight: 500;
										text-align: left;
										color: #f4f4f4;
		
									}
		
		
		
								}
		
								.search_lsit {
									position: absolute;
									top: 64rpx;
									left: 0;
									background: #f2f2f2;
									// height: 62px;
									min-width: 154rpx;
									display: flex;
									justify-content: center;
									flex-direction: column;
									align-items: center;
									opacity: 0;
		
									view {
										font-size: 24rpx;
										font-family: PingFang SC, PingFang SC-Medium;
										font-weight: 500;
										text-align: left;
										color: #999999;
										padding: 5rpx 0;
									}
								}
							}
		
							// 箭头旋转
							.active_img {
								transform: rotate(180deg);
								-ms-transform: rotate(180deg);
								/* IE 9 */
								-webkit-transform: rotate(180deg);
								/* Safari and Chrome */
							}
		
							.cancle_img {
								transform: rotate(0);
								-ms-transform: rotate(0);
								/* IE 9 */
								-webkit-transform: rotate(0);
								/* Safari and Chrome */
							}
		
							// 激活下拉框
							.searchActive {
								animation-name: searchZhankai;
								animation-duration: .5s;
								-webkit-animation-name: searchZhankai;
								-webkit-animation-duration: .5s;
								/* Safari 和 Chrome */
								overflow: hidden;
								animation-fill-mode: forwards;
							}
		
							@keyframes searchZhankai {
								0% {
									height: 0;
									opacity: 0;
								}
		
								100% {
									height: 110rpx;
									opacity: 1;
								}
							}
		
							@-webkit-keyframes searchZhankai
		
							/* Safari and Chrome */
								{
								0% {
									height: 0 !important;
									opacity: 0;
								}
		
								100% {
									height: 200rpx !important;
									opacity: 1;
								}
							}
		
							.cancleSearch {
								height: 0;
								animation-name: c_Search;
								animation-duration: 0;
								/* Safari and Chrome */
								-webkit-animation-name: c_Search;
								-webkit-animation-duration: 0;
								/* Safari 和 Chrome */
								overflow: hidden;
								animation-fill-mode: forwards;
							}
		
							@keyframes c_Search {
								0% {
									height: 110rpx;
									opacity: 1;
								}
		
								100% {
									height: 0px;
									opacity: 0;
								}
							}
		
							@-webkit-keyframes c_Search
		
							/* Safari and Chrome */
								{
								from {
									height: 110rpx;
									opacity: 1;
								}
		
								to {
									height: 0px;
									opacity: 0;
								}
							}
						}
		
		
					}
		
		
		
					.zwtj {
						width: 702rpx;
						margin: 0 auto 0;
						padding: 16rpx;
						box-sizing: border-box;
		
						view {
							display: flex;
							align-items: center;
		
							image {
								width: 34rpx;
								height: 34rpx;
								margin-right: 10rpx;
							}
		
							text {
								font-size: 32rpx;
								font-family: PingFang SC, PingFang SC-Bold;
								font-weight: 700;
								text-align: left;
								color: #5cd1ce;
							}
						}
					}
		
					.rctj {
						.Talent_recommendation_head {
							view {
								display: flex;
								align-items: center;
		
								image {
									width: 34rpx;
									height: 34rpx;
									margin-right: 10rpx;
								}
							}
						}
		
						.more {
							font-size: 28rpx;
							font-family: SourceHanSansCN Light, SourceHanSansCN Light-Light;
							color: #000000;
						}
					}
		
					.talentRec {
						padding: 0 24rpx;
						box-sizing: border-box;
					}
		
					.guanzhu {
						background: #ffffff;
						padding: 0 24rpx;
		
						.guanzhu_tit {
							height: 76rpx;
							line-height: 76rpx;
		
							:first-child {
								margin-right: 20rpx;
							}
						}
					}
		
		
				}
			}
		}
		
		// 点击tab改变样式
		.tab_active {
			width: 126rpx !important;
			min-width: 100rpx !important;
			font-size: 42rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}
		
		.activeClass {
			width: 70rpx;
			height: 34rpx;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}
	}
</style>
